﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/beetlex4axios.js"></script>
    <script src="js/component.js"></script>
    <title>Beetlex samples</title>

</head>
<body>
    <div id="page">
        <page-header>

        </page-header>
        <div class="container" style="margin-top:60px;">
            <div class="row">
                <ul class="nav nav-tabs">
                    <li role="presentation" :class="[tab=='employees'?'active':'']">
                        <a href="javascript:void(0)" @click="tab='employees'">Employees</a>
                    </li>
                    <li role="presentation" :class="[tab=='customers'?'active':'']">
                        <a href="javascript:void(0)" @click="tab='customers'">Customers</a>
                    </li>
                </ul>

                <table class="table" :style="{display:(tab=='employees'?'':'none')}">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Title</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,i) in employees.result">
                            <th scope="row">{{i+1}}</th>
                            <td><a :href="['/orders/employee/'+item.EmployeeID]" target="_blank"> {{item.FirstName}}</a></td>
                            <td>{{item.LastName}}</td>
                            <td>{{item.Title}}</td>
                        </tr>
                    </tbody>
                </table>

                <table class="table" :style="{display:(tab=='customers'?'':'none')}">       
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>CustomerID</th>
                            <th>CompanyName</th>
                            <th>ContactName</th>
                            <th>ContactTitle</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,i) in customers.result">
                            <th scope="row">{{i+1}}</th>
                            <td><a :href="['/orders/customer/'+item.CustomerID]" target="_blank">{{item.CustomerID}}</a></td>
                            <td>{{item.CompanyName}}</td>
                            <td>{{item.ContactName}}</td>
                            <td>{{item.ContactTitle}}</td>
                        </tr>
                    </tbody>
                </table>

            </div>
        </div>
    </div>
    <script>
        var employees = new beetlexAction('/Employees', null, []);
        var customers = new beetlexAction('/Customers', null, []);
        var model = {
            tab: 'employees',
            employees: employees,
            customers: customers,
        };
        var page = new Vue({
            el: '#page', data: model
        });
        employees.get();
        customers.get();
    </script>
</body>

</html>